<template>
  <div class="index-box">
    <CarouselBanner :username="username" :activityId="activityId"></CarouselBanner>
    <!-- 主打模块 -->
    <div class="activity_bg">
      <div class="knife_container">
          <!-- 11月 活动入口 -->
          <HotProduct></HotProduct>
          <!-- 排名活动 -->
          <!-- <teamRankIndex ></teamRankIndex> -->
          <!-- 送红包活动 -->
          <!-- <div v-if="promotionStep === 1 && !isRankOpen">
            <div class="activity-title-wrapper">
              <span class="activity-circle circle-purple"></span>
              <span class="activity-title-text">年终超级福利&nbsp;&nbsp;&nbsp;&nbsp;<em style="font-size: 30px;">888</em>元红包等你来领</span>
              <span class="activity-circle circle-purple"></span>
            </div>
            <div class="promotion-box">
              <img src="../activity/december/img/promotionhead.png"
                  class="promotion-head"
                  alt="">
              <img src="../activity/december/img/promotionbg.png" class="promotion-bg" alt="">
              <div class="promotion-title">获得红包名单</div>
              <div style="margin: -33px auto 0;width: 960px;">
                <slide-list style="margin-top: 30px;"
                    :list="promotionList"
                    index="1"
                    :listRow="3"
                    :listCol="2">
                </slide-list>
              </div>
              <router-link :to="{name: 'promotion'}" target="_blank" class="promotion-link">查看详情></router-link>
            </div>
          </div> -->
          <!-- 品牌折扣 -->
          <BrandProduct></BrandProduct>
      </div>
    </div>
  <div ref="containerRef" id="container">
      <!-- 精选品牌 -->
      <div class="brand_box" ref="brandRef">
        <section class="brand_module knife_container" >
          <div class="head">
            <span class="title"> 精选品牌</span>
            <router-link :to="{name: 'BrandCenter'}" target="_blank" @click.native="setBuryingPoint('全部品牌', '品牌中心')" class="fr right">全部品牌 ></router-link>
          </div>
          <ul class="brand_content">
            <template v-for="(brandItem, brandIndex) in brandList.slice(0 , 10)">
              <!--:to="{name: 'SearchPage', query: {page: 1, keyword: brandItem.name}}" -->
              <router-link class="brand_item"
                target="_blank"
                @click.native="setBuryingPoint('精选品牌', '品牌中心')"
                :to="{name: 'ModelList', query: {searchType: 1, page: 1, keyword: brandItem.name, r: randomDigit()}}">
                <img class="brand_img" :src="prefixImg + brandItem.image" :alt="brandItem.name" @error="catchErrorImage($event)"/>

                <p class="brand_name">{{brandItem.name}}</p>
              </router-link>
            </template>
          </ul>
        </section>
      </div>

      <!-- 实力热卖 -->
      <div class="knife_container" ref="hotsaleRef">
        <section class="index_module hotsale_module">
          <div class="head">
            <span class="title">爆款热卖</span>
            <router-link :to="{name: 'Hot'}" target="_blank" @click.native="setBuryingPoint('爆款热卖更多', '热卖列表')" class="fr right">更多 ></router-link>
          </div>
          <div class="hotsale_content">
            <div class="hotsale_img">
            </div>
            <div class="hotsale_box">
              <template v-for="(hotItem, modelIndex) in hotsaleList.slice(0, 8)">
                <modelProduct :Item="hotItem" :isTop="true" :Index="modelIndex" :buryPoint="['爆款热卖', '商品详情']" />
              </template>
            </div>
          </div>
        </section>
      </div>
      <!-- 价格助手 -->
      <div class="knife_container"ref="priceRef">
        <section class="index_module discount_module" >
          <div class="head">
            <span class="title">价格助理</span>
          </div>
          <div class="discount_content">
            <div class="discount_img">
            </div>
            <div class="discount_box">
              <div class="discount_box_head">
                <span class="discount_wd discount_wd_1">规格型号</span>
                <span class="discount_wd discount_wd_2">产品名</span>
                <span class="discount_wd discount_wd_3">品牌</span>
                <span class="discount_wd discount_wd_4">原价</span>
                <span class="discount_wd discount_wd_5">现价</span>
                <span class="discount_wd discount_wd_6">操作</span>
              </div>
              <ul class="discount_box_body">
                <li class="discount_item" v-for="(discountItem, discountIndex) in priceList" :key="discountIndex">
                  <div class="discount_wd discount_wd_1 name ellipsis">
                    <img class="" src="../../../static/default.jpg" width="35px" height="35px" alt="">
                    {{discountItem.standard}}
                  </div>
                  <div class="discount_wd discount_wd_2 name ellipsis">
                    {{discountItem.goodsName}}
                  </div>
                  <div class="discount_wd discount_wd_3 name ellipsis">
                    {{discountItem.brandName}}
                  </div>
                  <div class="discount_wd discount_wd_4 oldprice">
                    {{discountItem.oldPrice | floatPrices}}元
                  </div>
                  <template v-if="loginStatus === 1">
                    <div :class="['discount_wd discount_wd_5 oldprice', discountItem.rise ? 'rise' : 'drop']">
                      <i :class="['iconfont el-icon-knife-lujing arrow', discountItem.rise ? 'rotate180' : '']"></i>
                      {{discountItem.price | floatPrices}}元
                    </div>
                  </template>
                  <span class="discount_wd discount_wd_5 oldprice no-auth" v-else-if="loginStatus === 4">登录后查看</span>
                  <span class="discount_wd discount_wd_5 oldprice no-auth" v-else>审核通过后查看</span>
                  <router-link
                    :to="{name: 'productDetail', params: {commodityID: discountItem.goodsId}}"
                    @click.native="setBuryingPoint('价格助手', '商品详情')"
                    target="_blank"
                    class="discount_wd discount_wd_6 operate">立即采购</router-link>
                </li>
              </ul>
            </div>
          </div>
        </section>
      </div>
      <!-- 联盟有新 -->
      <div class="knife_container"ref="newproRef" v-if="newProductList && newProductList.length">
        <section class="index_module newpro_module" >
          <div class="head">
            <span class="title">新品推荐</span>
            <router-link :to="{name: 'New'}" target="_blank" @click.native="setBuryingPoint('新品推荐更多', '新品列表')" class="fr right">更多 ></router-link>
          </div>
          <div class="newpro_content">
            <div class="newpro_img">
            </div>
            <div class="newpro_box">
              <template v-for="(hotItem, modelIndex) in newProductList.slice(0, 4)">
                <modelProduct :Item="hotItem" :buryPoint="['新品推荐', '商品详情']"/>
              </template>
            </div>
          </div>
        </section>
      </div>
      <!-- 资讯 -->
      <div class="knife_container" ref="infomationRef">
        <section class="infomation_module"  >
          <div class="company_module index_module">
            <div class="head">
              <span class="title">公司资讯</span>
              <router-link :to="{name:'Notice', params: {type: 'companyInfo'}}" target="_blank" class="fr right">更多 ></router-link>
            </div>
            <div class="infomation_content">
              <router-link class="infomation_item" :to="{name: 'NoticeContent', params: {type: 'companyInfo', id: infoItem.id}}" target="_blank" v-for="(infoItem, infoIndex) in comInfoList.slice(0,3)" :key="infoIndex">
                <div class="infomation_img">
                  <img :src="prefixImg + infoItem.img" alt="">
                </div>
                <div class="infomation_text">
                  <p class="text">{{infoItem.title}}</p>
                  <p class="time">{{infoItem.publishTime}}</p>
                </div>
              </router-link>
            </div>
          </div>
          <div class="industry_module index_module">
            <div class="head">
              <span class="title">行业资讯</span>
              <router-link :to="{name:'Notice', params: {type: 'industry'}}" target="_blank" class="fr right">更多 ></router-link>
            </div>
            <div class="infomation_content industry_content">
              <router-link class="infomation_item" :to="{name: 'NoticeContent', params: {type: 'industry', id: infoItem.id}}" target="_blank" v-for="(infoItem, infoIndex) in infoList.slice(0,2)" :key="infoIndex">
                <div class="infomation_img">
                  <img :src="prefixImg + infoItem.img" :alt="infoItem.title">
                </div>
                <div class="infomation_text">
                  <p class="text">{{infoItem.title}}</p>
                  <p class="time">{{infoItem.publishTime}}</p>
                </div>
              </router-link>
            </div>
          </div>
        </section>
      </div>
      <!-- 左边导航 -->
      <section class="floor_nav_box" ref="floorRef" v-if="isPosShow">
        <a href="javascript:;" :class="{'on': currentPosInd === navIndex}" v-for="(navItem, navIndex) in floornav" :key="navIndex" @click="clickFloorNav(navItem.name, navIndex)">{{navItem.text}}</a>
      </section>
    </div>
    <!-- 认证失败 :visible.sync="examfailVisi"-->
     <el-dialog title="" :visible.sync="examfailVisi" width="480px" :show-close="true" class="index-dialog-wrapper" top="20vh" center>
      <div class="dialog-certinfo-wrapper">
        <p class="info-content">亲爱的用户，您的账号未通过审核<br>请查看审核信息</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <span class="btn-submit" @click="readExamReason">立即查看</span>
      </span>
    </el-dialog>
    <!-- 抽奖 boolreward-->
    <el-dialog title="" :visible="boolreward" width="480px" :before-close="handleCloseReward" top="20vh" center>
      <div class="dialog-certinfo-wrapper">
        <p class="info-content">恭喜您成为我们的幸运用户</p>
          <span class="small-content">赶紧开启您的幸运大奖吧</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <span class="btn-submit" @click="fetchlotteryDraw">开启幸运大奖</span>
      </span>
    </el-dialog>
    <section class="luck-box" v-if="luckshow">
      <div class="luck-wrapper">
        <img class="gift_left" src="../../images/gift_left.png"/>
        <img class="gift_right" src="../../images/gift_right.png"/>
        <div class="luck-content">
          <div class="luck-top">
            <i class="el-icon-close close-text" @click="luckshow = false"></i>
            <p class="title">恭喜您,中奖啦!</p>
            <span class="content">恭喜您获得{{lotteryObj.amount}}元优惠券</span>
            <div class="luck-num-box">
              <span class="number"><em class="small-tag">¥</em>{{lotteryObj.amount}}</span>
              <p class="desribe">{{lotteryObj.description}}</p>
              <span class="effectivedate">有效期：{{lotteryObj.receivingTime | filterDate}} - {{lotteryObj.overdueTime | filterDate}}</span>
            </div>
          </div>
          <div class="luck-button-box">
            <span class="btn-order" @click="immediateOrder">立即下单</span>
          </div>
        </div>
      </div>
    </section>
    <!-- 九月活动弹窗v-if="septActivityShow" -->
    <section class="activity-wrapper sept-ativity-mask" v-if="septActivityShow">
      <!-- <a href="/#/activityyear"
        class="sept-ativity-show activity-box"
        target="_blank"
        @click="setLog('弹框'),septActivityShow = false">
        <span class="btn-close el-icon-close" @click.stop.prevent="septActivityShow = false"></span>
        <img src="../../images/pop2.png" alt="">
      </a> -->
       <template v-for="(item, index) in popList.slice(0, 1)" >
        <a :href="`/#/${item.activityType}`"
          class="sept-ativity-show activity-box"
          target="_blank"
          @click="setLog('弹框'),septActivityShow = false">
          <span class="btn-close el-icon-close" @click.stop.prevent="septActivityShow = false"></span>
          <img :src="prefixImg + item.imgUrl" alt="活动弹窗" @error="catchErrorImage">
        </a>
      </template>
    </section>
    <div class="v-modal" tabindex="2" style="z-index: 2000;" v-if="luckshow"></div>
  </div>
</template>
<script>
import { CarouselBanner, GoodProduct, OctoProduct, BargainProduct, HotProduct, BrandProduct, ActivityRank, SlideList, modelProduct } from '@/components/index'
import { getGiftCenter, lotteryDraw, activityJoinLog, getProductPriceLog, noticelist, getSelectedBrand, getNewOrActivityProductList, getHotSaleProductList, setBuryingPoint, getGoodsListByKeyword, hotSaleActivity } from '@/service/get-data'
import { getCookie, setCookie } from '@/config/mUntils'
import { Col, Row, Button, Dialog } from 'element-ui'
import { prefixImg } from '@/tool/index'
import { phoneReplace, randomDigit, throttle } from '@/tool/tool'
import { mapState, mapActions } from 'vuex'
import teamRankIndex from '@/pages/activity/december/components/teamRankIndex'
import { priceList, hotsaleList, floornav } from './data.js'
export default {
  components: {
    CarouselBanner,
    GoodProduct,
    OctoProduct,
    BargainProduct,
    HotProduct,
    BrandProduct,
    ActivityRank,
    SlideList,
    teamRankIndex,
    modelProduct,
    elCol: Col,
    elRow: Row,
    elButton: Button,
    elDialog: Dialog
  },
  data () {
    return {
      isPosShow: false, // 是否展示侧边导航栏
      floornav,
      currentPosInd: 0,
      refposition: [], // 位置的数组
      priceList,
      hotsaleList,
      yourenList: [],
      riseImg: require('../../images/rise.png'),
      dropImg: require('../../images/drop.png'),
      newProductList: [], // 新品列表
      infoList: [], // 行业资讯
      comInfoList: [], // 公司资讯
      myRankList: null,
      brandList: [], // 品牌列表
      prefixImg,
      mainProlist: [], // 主打产品
      typeNumber: 3,
      goodsNumber: 5,
      examfailshow: true, // 认证失败 查看原因
      boolreward: false, // 抽奖的机会
      rewardVisi: true,
      luckshow: false, // 抽奖金额
      giftId: '', // 抽奖的id
      lotteryObj: {}, // 抽到的奖
      examfailVisi: false,
      startActity: false,
      septActivityShow: false,
      // rankActivityShow: false, // 排名弹窗
      popList: []
    }
  },
  computed: {
    ...mapState({
      cartlength: state => state.shopcart.cartlength,
      activityId: state => state.activityId - 0,
      username: state => state.user.username,
      bannerlist: state => state.bannerlist,
      activityRank: state => state.activity.activityRank,
      myteam: state => state.activity.myteam,
      rankStep: state => state.activity.rankStep,
      activeStatus: state => +state.activeStatus,
      Exam: state => +state.user.isExam
    }),
    // 排名活动是否正在进行
    isRankOpen () {
      if (!('openRanks' in this.activityRank)) { return false }
      if (this.activityRank.openRanks && !this.activityRank.openRanks.length) { return false }
      let rankActivityList = this.activityRank.openRanks[0] || {}
      if (!('endTime' in rankActivityList)) { return false }
      // 活动时间
      let startTimeParm = rankActivityList.startTime
      let endTimeParm = rankActivityList.endTime
      const starTimeStamp = (new Date(startTimeParm.replace(/-/g, '/'))).getTime()
      const endTimeStamp = (new Date(endTimeParm.replace(/-/g, '/'))).getTime()
      let nowTime = (new Date()).getTime()
      // 活动开始
      if (nowTime > starTimeStamp && nowTime <= endTimeStamp) {
        return true
      } else {
        return false
      }
    },
    loginStatus () {
      return this.$store.getters.loginStatus
    },
    Token () {
      return !!getCookie('Token')
    },
    TODAY () {
      let date = new Date()
      let month = date.getMonth() + 1
      let day = date.getDate()
      day = String(day).charAt(1) ? day : `0${day}`
      return month + '' + day
    }
  },
  methods: {
    ...mapActions(['fetchActivityId', 'getUserLevelInfo', 'fetchOpenActivity', 'fetchBrandActivity', 'getActivityFull']),
    randomDigit,
    // 埋点接口
    async setBuryingPoint (form, to) {
      let res = await setBuryingPoint(form, to)
      if (res.data.resultCode && res.data.resultCode === 2000) {
      } else {
        this.$message(res.data.resultMsg || '网络出错')
      }
    },
    // 活动日志
    async setLog (text) {
      let res = await activityJoinLog(this.username, this.activityId, text)
      if (res.data.resultCode && res.data.resultCode === 2000) {
      } else {
        this.$message(res.data.resultMsg || '网络出错')
      }
    },
    setExamFail () {
      if (!this.Token) return
      if (this.Exam === 2) {
        this.examfailVisi = true
      } else {
        this.examfailVisi = false
      }
    },
    // 首页 登录后判断完善企业信息 和 认证失败
    judgeInfo () {
      if (this.Token) {
        this.$store.commit('ISINDEXEXAM', 1)
      }
    },
    // 获取礼包 是否存在抽奖
    async haveRewardChance () {
      if (!this.Token) return
      this.$store.commit('ISINDEXEXAM', 1)
      let res = await getGiftCenter(this.page)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        res = res.data
        let list = res.data.list
        if (list.length > 0) {
          list.map((item, index) => {
            // 抽奖的券
            if (item.type === 1 && item.status === false) {
              this.boolreward = true
              this.giftId = item.id
            }
          })
        }
        this.$store.commit('UNRECEIVED', list.length)
      }
    },
    // 开启抽奖
    async fetchlotteryDraw () {
      let res = await lotteryDraw(this.giftId)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.lotteryObj = res.data.data
        this.boolreward = false
        this.luckshow = true
      } else {
        this.boolreward = false
        this.$message.error(res.data.resultMsg)
      }
    },
    immediateOrder () {
      this.luckshow = false
      if (this.cartlength === 0) {
        this.$message({
          message: '购物车为空,请先添加下单的商品'
        })
        return
      }
      this.$router.push({name: 'ShopCart'})
    },
    // 查看审核失败原因
    readExamReason () {
      this.examfailVisi = false
      this.$router.push({name: 'ComCertUploadResult', params: {type: 'failure'}})
    },
    handleCloseReward (done) {
      this.$confirm('幸运大奖只有一次～您确定要放弃吗', '', {
        confirmButtonText: '确认放弃'
      }).then(_ => {
        this.boolreward = false
        done()
      }).catch(_ => {})
    },
    // 活动弹窗
    activityPop () {
      // 无活动 不弹窗 后台不是配置的活动 activityId
      if (!this.activityId) return
      // TODO: 活动进行中
      // if (this.activeStatus !== 1) return
      let cookieActivityDate = getCookie('cookieActivityDate')
      if (cookieActivityDate === this.TODAY) {
        this.septActivityShow = false
        return
      }
      this.septActivityShow = true
      setCookie('cookieActivityDate', this.TODAY, 1)
    },
    // TODO: 活动弹窗 根据后端的接口 排名活动弹窗由前端判断
    async showPopAccordingJava () {
      if (!this.activityId) return
      let cookieActivityDate = getCookie('cookieActivityDate')
      if (cookieActivityDate === this.TODAY) {
        return false
      }
      let poparr = []
      // let act2 = await activityPromotion(1, 10, (this.$store.state.user.id || getCookie('USERID')))
      let hotsaleAct = await hotSaleActivity(this.username)
      let brandAct = await this.fetchBrandActivity()
      let fullAct = await this.getActivityFull()
      const hotsaleData = hotsaleAct.data.data.voList && hotsaleAct.data.data.voList[0]
      const brandData = brandAct.voList && brandAct.voList[0]
      const fullData = fullAct.voList && fullAct.voList

      Promise.all([hotsaleData, brandData, ...fullData]).then(result => {
        result.map(item => {
          let popobj = {}
          if (item && item.popUp) {
            popobj['imgUrl'] = item.imgUrl
            // popobj['url'] = item.url
            popobj['activityType'] = item.activityType
            poparr.push({...popobj})
          }
        })
        return poparr
      }).then(res => {
        this.popList = poparr
        if (res && res.length > 0) {
          this.activityPop()
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 优刃商品
    async fetchYourenList () {
      let res = await getGoodsListByKeyword(1, 4, '优刃')
      res = res.data
      if (res.resultCode && res.resultCode === 2000) {
        this.yourenList = [...res.data.list]
      }
    },
    // 精选品牌
    async fetchBrandList () {
      let res = await getSelectedBrand()
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.brandList = res.data.data
      }
    },
    // 新品
    async fetchNewProductList () {
      let res = await getNewOrActivityProductList(this.username, true)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.newProductList = res.data.data.list
      }
    },
    // 热卖hotsaleList
    async fetchHotProductList () {
      let res = await getHotSaleProductList(1, 8, this.username)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        if (res.data.data.list.length >= 8) {
          this.hotsaleList = res.data.data.list
        }
        // this.hotsaleList = res.data.data.list
      }
    },
    // 行业资讯
    async fetchInfoList () {
      let res = await noticelist(this.page, this.number, 1)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.infoList = res.data.data.list
      } else {
        console.error(res.data.resultMsg)
      }
    },
    // 公司资讯
    async fetchComInfoList () {
      let res = await noticelist(this.page, this.number, 2)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.comInfoList = res.data.data.list
      } else {
        console.error(res.data.resultMsg)
      }
    },
    // 位置数组
    getPosition () {
      const container = this.$refs.containerRef && this.$refs.containerRef.offsetTop
      const brand = this.$refs.brandRef && this.$refs.brandRef.offsetTop
      const hotsale = this.$refs.hotsaleRef && this.$refs.hotsaleRef.offsetTop
      const price = this.$refs.priceRef && this.$refs.priceRef.offsetTop
      const newpro = this.$refs.newproRef && this.$refs.newproRef.offsetTop
      // console.log(container, brand, hotsale, price, newpro)
      // console.log(this.hotsaleList)
      const list = [{offset: brand + container, index: 0}, {offset: hotsale + container, index: 1}, {offset: price + container, index: 2}, {offset: newpro + container, index: 3}, {offset: newpro + container + 250, index: 4}]
      this.refposition = list
    },
    clickFloorNav (name, index) {
      const element = this.$refs[name]
      if (element) {
        element.scrollIntoView({behavior: 'smooth', block: 'start'})
      }
    },
    // 获取价格助手列表 getProductPriceLog
    async fetchProductPriceList () {
      let res = await getProductPriceLog(10)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        let list = res.data.data
        if (list.length >= 10) {
          this.priceList = list
        }
      } else {
        console.error(res.data.resultMsg)
      }
    },
    handleScroll () {
      const distance = this.activityId ? 596 : 346
      const overdistance = this.activityId ? 895 : 645
      const scroll = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
      const len = this.refposition.length
      const clientH = document.body.clientHeight
      const scrollH = document.body.scrollHeight
      // console.log(this.refposition)
      if (scroll + clientH > scrollH - 40 || scroll + overdistance < this.refposition[1]['offset']) {
        this.isPosShow = false
        this.currentPosInd = 0
        return
      }
      this.isPosShow = true
      // 底部
      if (scrollH - clientH - 50 < scroll) {
        this.currentPosInd = len - 2
        return
      }
      // offset - scroll 的值 为304， 取306略大于
      for (let i = 0; i < len; i++) {
        if (scroll + distance > this.refposition[i].offset && scroll + distance <= this.refposition[i + 1].offset) {
          this.currentPosInd = i
          break
        }
      }
    },
    catchErrorImage (e) {
      e.target.src = require('img/newload.png')
    },
    // 懒加载
    lazyLoad () {
      console.log('滚动')
      const viewHeight = document.body.clientHeight || document.documentElement.clientHeight
      console.log(viewHeight)
      let els = document.querySelectorAll('img[data-original][lazyload]')
      Array.prototype.forEach.call(els, function (item, index) {
        let rect = null
        if (item.dataset.original === '') {
          return
        }
        rect = item.getBoundingClientRect()
        console.log(rect)
        if (rect.bottom > 0 && rect.top < viewHeight) {
          (function () {
            var img = new Image()
            img.src = item.dataset.original
            img.onload = function () {
              item.src = img.src
            }
            item.removeAttribute('data-original')
            item.removeAttribute('lazyload')
          }())
        }
      })
    }
  },
  filters: {
    filterDate (value) {
      if (!value) return ''
      value = value.split(' ')[0]
      return value
    },
    phoneReplace (value) {
      return phoneReplace(value)
    },
    nicknameReplace (value) {
      let len = value.length
      let hiddenStr = value.substring(2, len)
      if (len === 2) {
        return value.replace(/.{0,1}$/, '*')
      } else if (len > 2) {
        return value.replace(hiddenStr, '****')
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    if (from.name === 'Login') {
      next(vm => {
        vm.setExamFail()
        vm.getUserLevelInfo()
      })
    }
    next()
  },
  mounted () {
    const vm = this
    this.judgeInfo()
    this.fetchActivityId()
    this.showPopAccordingJava() // 活动弹窗
    // this.activityPop()
    // this.haveRewardChance() // 抽奖弹窗 因为与活动弹窗冲突 关闭
    this.fetchProductPriceList()
    this.fetchNewProductList()
    this.fetchHotProductList()
    this.fetchYourenList()
    this.fetchBrandList()
    this.fetchInfoList()
    this.fetchComInfoList()
    this.$nextTick(() => {
      setTimeout(() => {
        vm.getPosition()
      }, 1500)
      // window.addEventListener('scroll', this.handleScroll, false)
    })
    window.onscroll = throttle(vm.handleScroll, 500)
  },
  watch: {

  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
    var vm = this
    window.clearInterval(vm.globalTimer)
    vm.globalTimer = null
  }
}
</script>
<style lang="scss">
  .activity_bg{
    // background: rgb(255, 255, 255);
    // margin-top: -50px;
    // padding-top: 50px;
    // padding-bottom: 20px;
    // margin-bottom: -40px;
    padding-top: 20px;
  }
  .grid-content{
    position: relative;
    height: 188px;
    cursor: pointer;
    overflow: hidden;
  }
  .grid-content .item{
    width: 38%;
    display: inline-block;
    text-align: center;
    padding: 8% 5% 0;
  }
  .home-promo-list:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    z-index: 2;
  }
  .item img{
    width: 26px;
  }
  .channel-list {
    i {
      font-size: 26px;
      color:#666666;
      font-weight: 600;
    }
    .text{
      font-size: 14px;
      line-height: 20px;
      color: #767676;
      margin-top: 10px;
    }
  }
  .channel-list-left{
    position: absolute;
    float: left;
    padding: 55px 0 0 30px;
    // width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .big-title{
      display:inline-block;
      font-size: 18px;
      color: #474747;
      line-height: 25px;
      margin-bottom: 3px;
    }
    .small-title{
      font-size: 14px;
      color: #999999;
      margin-bottom: 20px;
      width: 100%;
      line-height: 20px;
    }
    .small-btn{
      // width: 40px;
      display: inline-block;
      text-align: center;
      padding: 2px 7px;
      line-height: 17px;
      border: 1px solid #E8BA07;
      border-radius: 4px;
      font-size: 12px;
      color: #E8BA07;
      box-sizing: border-box;
    }
    .brand-style{
      color:#2FC5E3;
      font-size: 12px;
    }
  }
  .channel-list-right{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right:0;
    height: 100%;
    width: 100%;
  }
  .module_first{
    margin-bottom: 14px;
  }
  .module_title{
      margin:8px 0 16px;
      .title{
        font-size: 18px;
        color: #333333;

        i{
          color:#FFCC00;
          font-size:15px;
          padding-right: 4px;
          vertical-align: middle;
        }
        em{
          vertical-align: middle;
        }
      }

    }

    .module_right_title{
      // min-width: 113px;
      // display: inline-block;
      font-size: 0;
      float: right;
      a{
        font-size: 14px;
        color: #767676;
      }
      .a-more{
        padding-left: 5px;
        float: right;
        margin-top: -14px;
        &:after{
          content: '';
          clear: both;
        }
      }
      .index_module_a{
        position: relative;
        padding: 0 5px;

      }
      .index_module_a:after{
        content: '';
        padding: 10px 5px 1px;
        font-size: 0;
        border-right: 1px solid #DCDCDC;
      }
      .column-line{
        display:inline-block;
        vertical-align: text-bottom;
        width:2px;
        height:9.5px;
        background: #DCDCDC;

      }
    }
  .activity-body {
    .module_title{
      .title{
        font-size: 18px;
        color: #FFF;
        i{
          color:#FFF;
        }
      }
    }
    .module_right_title {
      a{
        color:#FFF;
      }
      .column-line{
        background:#FFF;
      }
    }
  }
  .index-dialog-wrapper{
    .el-dialog{
      border-radius: 10px;
    }
    .el-dialog__headerbtn .el-dialog__close{
      color: #303030;
      font-weight: bolder;
    }
  }
</style>
<style lang="scss" scoped>
.activity-body{
  background:#F6ADAD;
}
.youren-box{
  background: #fff;
  margin-bottom: 20px;
  padding-bottom: 10px;
  .youren_img{
    width:230px;
    height:300px;
    display: inline-block;
    background-image: url(./img/youren.png);
    background-size: 100% 100%;
    float: left;
    .youren-btn{
      width:196px;
      height:50px;
      line-height: 50px;
      text-align: center;
      display: block;
      cursor: pointer;
      margin: 230px auto 0;
      background:rgba(255,255,255,1);
      border-radius:26px;
    }
  }
  .youren-goods{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 240px;
    &>a{
      border:1px solid rgba(238,238,238,1);
    }
  }
}
.brand_box{
  margin-top: 10px;
  padding-bottom: 10px;
  // background: #fff;
  // margin-bottom: 20px;
}
.module_one{margin-bottom:45px;}
.sept-ativity-show{
  position: absolute;
  display: block;
  margin-top: 10%;
  left: 50%;
  width: 950px;
  margin-left: -475px;
  text-align: center;
  cursor: pointer;
  .img-left{
    float: left;
    margin-top: 10px;
  }
  .btn-close{
    color: #fefefe;
    width:25px;
    height:33px;
    font-size: 28px;
    position: absolute;
    top: 78px;
    right:190px;
    z-index: 99;
    // background:url('../../images/pop_close.png');
    // background-size: contain;
    // background-repeat: no-repeat;
  }
  img{
    width: 100%;
  }
  .btn-sure{
    position: absolute;
    bottom: 42px;
    left: 49.3%;
    margin-left: -100px;
    width: 200px;
    height: 50px;
    background: #232323;
    border-radius: 5px;
    color: rgba(255,255,255,1);
    line-height: 22px;
    display: inline-block;
    line-height: 50px;
    text-align: center;
  }
  .btn-gray {
    background: #BFBFBF;
    color:#000000;
  }
}
.sept-ativity-mask{
  background: rgba(0,0,0,0.4)
}
// 排名弹窗
.rank-pop-wrapper{
  position: absolute;
  display: block;
  margin-top: 10%;
  left: 50%;
  width: 830px;
  margin-left: -415px;
}
.rank-pop-head{
  position: relative;
  z-index: 55;
  text-align: center;
  font-size:28px;
  line-height:80px;
  height: 108px;
  color:#fff;
  background:url('../../images/rank_head.png');
  background-size: contain;
  background-repeat: no-repeat;
  .btn-close{
    position: absolute;
    color: #fefefe;
    width:25px;
    height:33px;
    font-size: 28px;
    top: 26px;
    right:80px;
    z-index: 99;
    // background:url('../../images/pop_close.png');
    // background-size: contain;
    // background-repeat: no-repeat;
  }
}
.rank-pop-content{
  background: #fff;
  width: 685px;
  margin: -36px auto 0;
  z-index: 1;
  padding: 50px 60px 50px;
  box-sizing: border-box;
  .rank-pop-item{
    margin-bottom: 20px;
    line-height: 100px;
    padding: 7px 18px;
    background:rgba(255,250,227,1);
    border-radius:6px;
    color:#000;
    font-size: 20px;
    box-sizing: border-box;
    &:last-child{
      margin-bottom: 0;
    }
  }
  .username{ margin-right: 25px;}
  .rank-pop-img{
    width:85px;
    margin-right: 25px;
    vertical-align: middle;
  }
}

// 活动
.octo_product{
  float: left;
}
.more_activity{
  display: inline-block;
  width: 24px;
  text-align: center;
  background: rgba(159,37,148,0.68);
  color: #fff;
  padding: 32px 18px;
  line-height: 25px;
  font-size: 18px;
}
.promotion-box {
  margin-top: 60px;
  padding: 50px;
  padding-top: 0;
  position: relative;
  background-color: #fff;
  border-radius: 6px;
  box-shadow:0px 0px 15px 0px rgba(210,177,255,1);
  text-align: center;
  .promotion-head {
    width: 1000px;
    position: relative;
    top: -30px;
  }
  .promotion-bg {
    width: 1060px;
    position: absolute;
    left: 70px;
    top: 80px;
  }
  .promotion-title {
    width: 100%;
    left: 0;
    font-size: 18px;
    color: #ffffff;
    position: absolute;
    top: -6px;
  }
  .promotion-content {
    font-size: 14px;
    color: #666666;
    line-height: 37px;
    text-align: left;
    &.red {
      color: #e90202;
    }
  }
  .promotion-link{
    position: absolute;
    right: 140px;
    bottom: 19px;
    font-size: 14px;
    color: #666666;
  }
}
// 平台化
.head{
  @include fontbase(#333333, 18px, 25px)
  margin-bottom: 16px;
  .right{
    display: inline-block;
    @include fontbase(#767676, 12px, 17px)
    // border:1px solid rgba(151,151,151,1);
    padding: 4px 0;
    cursor: pointer;
  }
}
.index_module{
  margin-bottom: 20px;
  .hotsale_module{
    padding-top: 20px;
  }
  .hotsale_content{
    overflow: hidden;
    .hotsale_img{
      float: left;
      width:230px;
      height:610px;
      // background:linear-gradient(180deg,rgba(250,189,94,1) 0%,rgba(243,138,32,1) 100%);
      background: url('./img/1.png') no-repeat;
      background-size: cover;
    }
    .hotsale_box{
      margin-left: 240px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }
  .discount_content{
    overflow: hidden;
    .discount_img{
      float: left;
      width:230px;
      height:330px;
      // background:linear-gradient(180deg,rgba(250,189,94,1) 0%,rgba(243,138,32,1) 100%);
      background: url('./img/2.png') no-repeat;
      background-size: cover;
    }
    .discount_box{
      margin-left: 240px;
      .discount_box_head{
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: #fff;
        letter-spacing:1px;
        box-sizing: border-box;
        padding: 0 20px 0;
        background:rgba(47,47,47,1);
      }
    }
    .discount_wd{
      display: inline-block;
      overflow: hidden;
      &_1{
        width: 234px;
      }
      &_2{
        width: 175px;
      }
      &_3{
        width: 140px;
      }
      &_4{
        width: 130px;
      }
      &_5{
        width: 98px;
        text-align: center;
      }
      &_6{
        width: 90px;
        text-align: right;
      }
    }
    .discount_box_body{
      background: #fff;
      height: 300px;
      overflow-y: auto;
      .discount_item{
        padding: 0 20px 0;
        border-bottom: 1px solid #F8F8F8;
        height: 50px;
        line-height: 50px;
        box-sizing: border-box;
        &:last-child{
          border-bottom: none;
        }
        .name{
          font-size: 12px;
          color: #333333;
        }
        .oldprice{
          color: #666666;
          font-size: 14px;
        }
        .no-auth{
          color: #F2572F;
        }
        .drop{
          font-family:PingFangSC-Medium;
          color: #FF0100;
        }
        .rise{
          font-family:PingFangSC-Medium;
          color: #06AF2D;
        }
        .rotate180{
          transform: rotate(180deg);
        }
        .operate{
          color: #0368CD;
          font-size:12px;
          text-decoration: underline;
        }
        img{
          vertical-align: middle;
          // margin-right: 5px;
        }
      }
    }
  }
  .newpro_content{
    overflow: hidden;
    .newpro_img{
      float: left;
      width:230px;
      height:300px;
      // background:linear-gradient(180deg,rgba(250,189,94,1) 0%,rgba(243,138,32,1) 100%);
      background: url('./img/3.png') no-repeat;
      background-size: cover;
    }
    .newpro_box{
      margin-left: 240px;
      display: flex;
      justify-content: space-between;
    }
  }
}
.brand_content{
  overflow: hidden;
  .brand_item{
    float: left;
    width: 230px;
    height: 120px;
    padding: 10px 0 20px;
    border: 1px solid #eee;
    background: white;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    &:nth-child(5n){
      margin-right: 0;
    }
  }
  .brand_img{
    margin-bottom: 10px;
    height: 60px;
  }
  .brand_name{
    @include fontbase(#333333, 14px, 20px)
  }
}
.infomation_module{
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  .company_module{
    width: 710px;
  }
  .industry_module{
    width: 470px;
  }
  .industry_content{
    display: flex;
    justify-content: flex-end;
  }
  .infomation_item{
    overflow: hidden;
    background: #fff;
    width: 230px;
    height: 300px;
    float: left;
    margin-right: 10px;
    &:last-child{
      margin-right: 0;
    }
  }
  .infomation_img{
    height: 180px;
    width: 230px;
    img{
      height: 100%;
      width:100%;
    }
  }
  .infomation_text{
    padding: 20px;
    .text{
      margin-bottom: 23px;
      color: #333;
      line-height: 20px;
      font-size: 14px;
      height: 40px;
      overflow: hidden;
    }
    .time{
      font-size: 12px;
      color: #b0b0b0;
      line-height: 17px;
    }
  }
}
</style>
